<template>
    <el-row>
        <el-col :span="2">
            <div>
                <el-button icon="el-icon-menu" size="mini" @click="menuHandler"></el-button>
            </div>
        </el-col>
        
        <el-col :span="16">
            <div class="table">&nbsp;</div>
        </el-col>
        <el-col :span="6">
            <!--   头像下拉菜单 -->
            <el-dropdown trigger="click">
                <div class="circle">
                    
                    <span>{{username}}</span>
                    <el-avatar :size="50" :src="imgUrl"></el-avatar>
                    
                    
                    
                </div>
                <el-dropdown-menu slot="dropdown">
                    
                    <el-dropdown-item icon="el-icon-check" @click.native="quitLogin">退出</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </el-col>
    </el-row>
</template>

<script>
    export default {
        name: "HelloWorld",
        data() {
            return {
                //菜单控制
                isCollapse: false,
                //头像地址
                imgUrl: require('../assets/logo.png'),
                username:''
            }
        },
        methods: {
            quitLogin() {
                // location.reload()
                //console.log(localStorage.getItem('token'))
                localStorage.removeItem('token');
                window.sessionStorage.clear()
                this.$router.push('/login')
            },
            menuHandler() {
                this.$store.commit('MENUHANDLER')
            }
        },
        mounted(){
            
            this.username = this.$store.state.userdata.userName;
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
    .table {
        color: #C0C4CC;
        line-height: 60px;
    }
    .el-dropdown{
        display: flex;
        justify-content: flex-end;
        .circle {
            
            display: flex; 
            align-items: center; 
            gap: 13px; 
            el-avatar {
                width: 32px; 
                height: 32px; 
                object-fit: cover; 
            }
            span {
                
                font-size: 14px;
                color: #2b2929;
            }
    }
    
        
        
}

    .el-avatar {
        margin: 5px 0 0 0;
    }
</style>